<template>
    <div style="display:flex;height:100vh">
        <!--        左侧-->
        <div style="flex:2;background-color:#182450;">
            <el-menu
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose"
                    background-color="#182450"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                    style="width:100%"
                    unique open>
                <el-submenu index="1" style="width:100%">
                    <template  slot="title" :float="false";style=" text-align:center">
                        <i class="el-icon-s-tools"></i>
                        <span>设备管理</span>
                    </template>
                    <el-menu background-color="#182450"
                             text-color="#fff">
                        <el-menu-item index="1"><i class="el-icon-guide"></i>已安装管理</el-menu-item>
                        <el-menu-item index="2"><i class="el-icon-cpu"></i>设备列表</el-menu-item>
                        <el-menu-item index="3"><i class="el-icon-bank-card"></i>传统火灾报警系统</el-menu-item>
                        <el-menu-item index="4"><i class="el-icon-eleme"></i>站点列表</el-menu-item>
                        <el-menu-item index="5"><i class="el-icon-school"></i>楼层管理</el-menu-item>
                        <el-menu-item index="6"><i class="el-icon-user-solid"></i>联系人管理</el-menu-item>
                        <el-menu-item index="7"><i class="el-icon-pie-chart"></i>设备统计</el-menu-item>
                    </el-menu>
                </el-submenu>
            </el-menu>
        </div>
        <!--        右侧-->
        <el-form style="flex:11;background-color:#242E66">
            <!--            form-->
            <el-form :inline="true" :model="formInline" ref="formInline"  class="demo-form-inline; label-color:#EDEDED">
                <el-form-item label="所属单位" prop="unit" >
                    <el-cascader v-model="formInline.region" placeholder="请选择 所属单位"
                                 :options="options" filterable clearable  :props="{ checkStrictly: true }"
                                 :show-all-levels="false">
                    </el-cascader>
                </el-form-item >
                <el-form-item label="单位限制" prop="restrictions">
                    <el-select v-model="formInline.restrictions" placeholder="请选择 单位限制">
                        <el-option label="包含下级单位" value="1"></el-option>
                        <el-option label="仅本单位" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选择站点" prop="site">
                    <el-select v-model="formInline.site" placeholder="请选择 选择站点">
                        <el-option label="区域一" value="1"></el-option>
                        <el-option label="区域二" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选择楼层" prop="floor">
                    <el-select v-model="formInline.floor" placeholder="请选择 选择楼层">
                    </el-select>
                </el-form-item>
                <el-form-item label="设备类型" prop="devicetype">
                    <el-select v-model="formInline.devicetype" placeholder="请选择 设备类型">
                        <el-option label="感烟探测器" value="1"></el-option>
                        <el-option label="气感" value="2"></el-option>
                        <el-option label="门磁" value="3"></el-option>
                        <el-option label="井盖异动" value="4"></el-option>
                        <el-option label="一键报警按钮" value="5"></el-option>
                        <el-option label="漏水监测" value="6"></el-option>
                        <el-option label="安全用电探测器" value="7"></el-option>
                        <el-option label="液化石油" value="8"></el-option>
                        <el-option label="室外消防栓" value="9"></el-option>
                        <el-option label="声光警号" value="10"></el-option>
                        <el-option label="摄像头" value="11"></el-option>
                        <el-option label="温感报警器" value="12"></el-option>
                        <el-option label="红外探测器" value="13"></el-option>
                        <el-option label="智能断路器" value="14"></el-option>
                        <el-option label="压力变送器" value="15"></el-option>
                        <el-option label="液位变送器" value="16"></el-option>
                        <el-option label="温湿度探测器" value="17"></el-option>
                        <el-option label="人体探测器" value="18"></el-option>
                        <el-option label="一氧化碳探测器" value="19"></el-option>
                        <el-option label="主机网关" value="20"></el-option>
                        <el-option label="防火门监测系统" value="21"></el-option>
                        <el-option label="消防电源" value="22"></el-option>
                        <el-option label="火灾报警部件" value="23"></el-option>
                        <el-option label="电气火灾部件" value="24"></el-option>
                        <el-option label="一氧化碳" value="25"></el-option>
                        <el-option label="智能穿戴" value="26"></el-option>
                        <el-option label="复合型气感探测器" value="27"></el-option>
                        <el-option label="智能显示屏" value="28"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="设备名称" prop="name">
                    <el-input v-model="formInline.name" placeholder="请输入 设备名称"></el-input>
                </el-form-item>
                <el-form-item label="设备号"prop="numeber">
                    <el-input v-model="formInline.numeber" placeholder="请输入 设备号"></el-input>
                </el-form-item>
                <el-form-item label="在线状态" prop="presence">
                    <el-select v-model="formInline.presence" placeholder="请选择 在线状态">
                        <el-option label="离线" value="shanghai"></el-option>
                        <el-option label="在线" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="安装地址" prop="address">
                    <el-input v-model="formInline.address" placeholder="请输入 安装地址"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">搜索</el-button>
                    <el-button type="primary" @click="resetForm('formInline')">清空</el-button>
                </el-form-item>
            </el-form>
            <!--新增-->
            <el-button type="primary" size="small" @click="addform"> +  新增 </el-button>
            <el-dialog title="新增" :visible.sync="dialogFormVisibleadd" >
                <el-divider></el-divider>
                <el-form inline="true" :model="add" ref="add" :rules="rulesadd" label-width="100px">
                    <el-form-item label="所属单位:"prop="unit">
                        <el-cascader v-model="add.unit" placeholder="请选择 所属单位"
                                     :options="options" filterable clearable  :props="{ checkStrictly: true }"
                                     :show-all-levels="false"></el-cascader>
                    </el-form-item>
                    <el-form-item label="设备名称" prop="name">
                        <el-input v-model="add.name" clearable placeholder="请输入 设备名称"></el-input>
                    </el-form-item>
                    <el-form-item label="设备号" prop="number">
                        <el-input v-model="add.name" clearable placeholder="请输入 设备号"></el-input>
                    </el-form-item>
                    <el-form-item label="安装地址" prop="address">
                        <el-input v-model="add.name" clearable placeholder="请输入 安装地址"></el-input>
                    </el-form-item>
                    <el-button type="primary" icon="el-icon-circle-plus-outline"@click="submitForm">保 存</el-button>
                </el-form>
            </el-dialog>
            <!--            表格-->
            <el-table
                    ref="multipleTable"
                    :data="tableData"
                    style="width:84vw"
                    :header-cell-style="{backgroundColor: '#3F51B5', color: '#fff', fontSize: '12px' }"
                    :cell-style="{color: '#fff', fontSize: '11px' }"
                    :row-class-name="tableRowClassName">
                <el-table-column
                        fixed
                        prop="tSelection"
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        fixed
                        prop="tSerialnumber"
                        label="序号"
                        width="55"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="tAffiliatedunit"
                        label="所属单位"
                        width="120"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="tDevicetype"
                        label="设备类型"
                        width="120"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="tName"
                        label="设备名称"
                        width="100"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="tDevicenumber"
                        label="设备号"
                        width="120"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="tPresence"
                        label="在线状态"
                        width="100"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="tSignal"
                        label="信号"
                        width="60"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="tTefencestate"
                        label="布防状态"
                        width="120"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="tSitename"
                        label="站点名称"
                        width="120"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="tFloor"
                        label="楼层"
                        width="55"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="tInstallationaddress"
                        label="安装地址"
                        width="120"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="tInstallationdiagram"
                        label="安装图"
                        width="70"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="tDataDate"
                        label="数据时间"
                        width="120"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="tAddDate"
                        label="添加日期"
                        width="120"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="400" show-overflow-tooltip>
                    <template slot-scope="scope" >
                        <el-select v-model="gengduo" placeholder="更多" size="mini">
                            <el-option label="更换设备号" value="1">
                                <el-button type="text" @click="dialogVisible = true">更换设备号</el-button>
                            </el-option>
                        </el-select>
                        <!--                        <el-button size="mini" @click="handleSelect(scope.$index, scope.row)">-->
                        <router-link :to="'/Details'">
                            <el-button size="mini" type="primary" icon="el-icon-view">详情</el-button>

                        </router-link>
                        <!--                        </el-button>-->
                        <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
                <div style="margin-top: 20px">
                    <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
                    <el-button @click="toggleSelection()">取消选择</el-button>
                </div>
            </el-table>
        </el-form>


        <el-dialog title="提示" :visible.sync="dialogVisible">
            <el-form :model="dialogform">
                <el-form-item label="替换的设备号" prop="number" inline="true" label-width="100px">
                    <el-input v-model="dialogform.number" clearable placeholder="替换的设备号"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogform = false">取 消</el-button>
                <el-button type="primary" @click="dialogform = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>


<script>
    export default {
        // name: "home",
        data() {
            return {
                formInline: {
                    unit: '',
                    restrictions: '',
                    site: '',
                    floor: '',
                    devicetype: '',
                    name: '',
                    numeber: '',
                    presence: '',
                    address: ''},
                options: [
                    {value: '智慧消防远程监控平台', label: '智慧消防远程监控平台',
                        children: [{value: '朔州市消防大队', label: '朔州市消防大队',
                            children: [{value: '圣厚源大酒店', label: '圣厚源大酒店',
                                children: [{value: '圣厚源办公室', label: '圣厚源办公室'}]},
                                {value: '瑞明网络通信工程有限公司', label: '瑞明网络通信工程有限公司'}]},
                            {value: '瑞明网络通信工程有限公司', label: '瑞明网络通信工程有限公司',
                                children: [{value: '朔州市经济开发区管理委员会', label: '朔州市经济开发区管理委员会',
                                    children: [{value: '开发区环境局', label: '开发区环境局'},{value: '开发区建设局', label: '开发区建设局'}]},
                                    {value: '朔州市邮政储蓄银行', label: '朔州市邮政储蓄银行',
                                        children: [{value: '右玉县支行', label: '右玉县支行'},{value: '山阴县支行', label: '山阴县支行'}]},
                                    {value: '开发南路', label: '开发南路',
                                        children: [{value: '朔城区第三中学', label: '朔城区第三中学'}]},
                                    {value: '文远路街道', label: '文远路街道',
                                        children: [{value: '朔州今乔智慧公寓', label: '朔州今乔智慧公寓'},{value: '幸福家纺', label: '幸福家纺'}]}]}]}
                ],
                dialogFormVisibleadd: false,
                add: {
                    unit: '',
                    name: '',
                    number: '',
                    address: '',
                },
                rulesadd: {
                    unit: [{ required: true, message: '所属单位', trigger: 'change' }],
                    name: [{ required: true, message: '设备名称', trigger: 'blur' }],
                    number: [{ required: true, message: '设备号', trigger: 'blur' }],
                    address: [{ required: true, message: '安装地址', trigger: 'blur' }]
                },
                tableData: [{
                    tSelection:'',
                    tSerialnumber:'',
                    tAffiliatedunit:'',
                    tDevicetype:'',
                    tName:'',
                    tDevicenumber:'',
                    tPresence:'',
                    tSignal:'',
                    tTefencestate:'',
                    tSitename:'',
                    tFloor:'',
                    tInstallationaddress:'',
                    tInstallationdiagram:'',
                }],
                dialogVisible: false,
                replace: {
                    number: ''
                },
                rulesrep:{
                    number: [{ required: true, message: '替换的设备号', trigger: 'blur' }]
                },
                dialogform:{}
            };
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            onSubmit() {
                console.log('submit!');
                console.log(this.formInline);
                debugger;

            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            addform(){
                this.add = {
                    name: '',
                    phone: '',
                    unit: '',
                    WeChat: '',
                    note: '',
                    voice: ''}
                this.dialogFormVisibleadd = true
            },
            submitForm() {
                this.tableData.push(this.add) //向tableData中添加数据
                this.dialogFormVisibleadd = false
                console.log('submit!')
            },//新增
            handleEdit(index, row){
                console.log(index, row);
            },
            handleDelete(index, row){
                console.log(index, row);
            },
            tableRowClassName({ row, rowIndex }) {
                if ((rowIndex + 1) % 2 === 0) {
                    return "warning-row";
                } else {
                    return "success-row";
                }
            }, //表格斑马纹
        },
    }



</script>

<style>
    .el-form-item__label {
        color: #fff;
        line-height: 40px;
        padding: 0 12px 0 0;
        box-sizing: border-box;
    }
    .el-cascader .el-input .el-input__inner:focus, .el-cascader .el-input.is-focus .el-input__inner {
        background-color: #242E66;
    }
    .el-cascader .el-input .el-input__inner {
        text-overflow: ellipsis;
        background-color: #242E66;
    }

    .el-input--suffix .el-input__inner {
        padding-right: 30px;
        background-color: #242E66;
    }
    .el-cascader-menu__list {
        position: relative;
        min-height: 100%;
        margin: 0;
        padding: 6px 0;
        list-style: none;
        box-sizing: border-box;
        background-color: #242E66;
    }
    .el-cascader-node__label {
        color: #fff;
    }
    .el-cascader .el-input .el-input__inner:focus, .el-cascader .el-input.is-focus .el-input__inner {
        color: #fff;
    }
    .el-input__inner {
        color: #fff;
    }

    .el-select-dropdown__item {
        color: #fff;
        background-color: #242E66;
    }
    .el-select-dropdown__list {
        background-color: #242E66;
    }
    .el-input--suffix .el-input__inner {
        padding-right: 30px;
        background-color: #242E66;
    }
    .el-table .warning-row {
        background:#384176;
    }
    /*斑马纹*/
    .el-table .success-row {
        background: #242E66;
    }
    /*斑马纹*/
    元素 {
        flex: 1 1 auto;
        overflow: hidden auto;
    }
    .el-input__inner {
        color: #fff;
        background-color: #242E66;
    }

</style>
